<template>
  <div id="loginapp"
       v-loading="loading"
       element-loading-text="我在拼命登录中，球球惹别点了"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="aj">

      <div>
        <div class="yd1">
          <span>好</span>
          <span>好</span>
          <span>学</span>
          <span>习</span>
        </div>
        <div class="yd">
         <el-form :rules="rules" :model="from" style="height: 100%;" class="el-formdd">
           <el-form-item prop="username">
             <el-input v-model="from.username"></el-input>
           </el-form-item>

           <el-form-item prop="password">
             <el-input v-model="from.password" type="password"></el-input>
           </el-form-item>

           <el-form-item style="display: flex;justify-content: space-around">
             <el-button type="primary" icon="el-icon-check" round @click="login">登录</el-button>
             <el-button type="danger" icon="el-icon-close" round @click="ueset">重置</el-button>
           </el-form-item>
         </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Mock from 'mockjs'
import cookie from 'js-cookie'
export default {
  name: 'login',
  data(){
    return{
      from:{
        username:'',
        password:'',
      },
      rules:{
        username:[
          {
            required:true,
            trigger:'blur',
            message:'请输入用户名'
          }
        ],
        password: [
          {
            required:true,
            trigger:'blur',
            message:'请输入密码'
          }
        ]
      },
      loading:false

    }
  },
  methods:{
    ueset(){

    },
    login(){
       let taken = Mock.Random.guid()
      cookie.set("taken",taken)
      console.log("wwwww")
      this.$router.push({
        path:'/home'
      })
      // document.cookie("taken",taken)
      // this.loading = true
      // setTimeout(()=>{
      //   this.loading = false
      //   this.$router.push({
      //     path:'/home'
      //   })
      // },3000)

    }
  }
}
</script>

<style scoped>
.aj{
  min-height: 500px;
  width: 100%;
  /*background-color: #93ff94;*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.aj>div{
  box-sizing: border-box;
  padding-right: 10px;
  width: 500px;
  height: 300px;
  background-color: rgba(207,215,217,.3);
  border-radius: 10px;
  display: flex;
  box-shadow: 1px 1px 10px 3px white;

}
.yd{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 300px;
  width: 300px;
}
.el-formdd{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.yd1{
  color: #dddddd;
  font-size: 27px;
  text-shadow: 1px 1px 5px black, -1px 1px 5px black, 1px -1px 5px black, -1px -1px 5px black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 300px;
  width: 300px;
}

#loginapp{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 543px;
  width: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  background-repeat: no-repeat;
  background-image: url("https://s1.hdslb.com/bfs/static/blive/blfe-message-web/static/img/infocenterbg.a1a0d152.jpg");
  background-size: 100% 100%;

}
.btn{
  display: flex;
  align-items: center;
  justify-content: space-around;
}


/*html,body{*/
/*  margin: 0;*/
/*  min-height: 550px;*/

/*}*/
*{
  margin: 0;
  padding: 0;
}
ul{
  min-height: 500px;
  list-style: none;
}

.el-header, .el-footer {
  /*min-height: 500px;*/
  /*background-color: #B3C0D1;*/
  background-color: rgba(179,192,209,.3);
  color: #333;
  /*text-align: center;*/
  line-height: 60px;
}

.el-aside {
  min-height: 500px;
  /*background-color: #D3DCE6;*/
  background-color: rgba(211,220,230,.3);

  color: #333;
  /*text-align: center;*/
  /*line-height: 100px;*/
}

.el-main {
  min-height: 500px;
  /*background-color: #E9EEF3;*/
  background-color: rgba(233,238,243,.3);
  color: #333;
  text-align: left;
  /*line-height: 1px;*/
}
h1{
  width: 80%;
  text-align: center;
}



.a1{
  color: black;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  text-decoration: none;
}
.a1:hover{
  color: red;
}

.header1{
  display: flex;
  align-items: center;
  justify-content: center;
}
.header1 span{
  font-size: 12px;
}
.box6{
  /*border: 1px solid black;*/
  width: 40px;
  height: 40px;
  position: relative;
  transform-style: preserve-3d;
  animation:  yd 1s  ease infinite;
  bottom: -26px;
  left: 100px;
}
.box6>div{
  border: 1px solid deeppink;
  width: 35px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 50%;
}
/*.box6>div:nth-child(1){*/
/*  transform: rotateY(15deg);*/
/*}*/
/*.box6>div:nth-child(2){*/
/*  transform: rotateY(30deg);*/
/*}*/
/*.box6>div:nth-child(3){*/
/*  transform: rotateY(45deg);*/
/*}*/
/*.box6>div:nth-child(4){*/
/*  transform: rotateY(60deg);*/
/*}*/
/*.box6>div:nth-child(5){*/
/*  transform: rotateY(75deg);*/
/*}*/
/*.box6>div:nth-child(6){*/
/*  transform: rotateY(90deg);*/
/*}*/
/*.box6>div:nth-child(7){*/
/*  transform: rotateY(105deg);*/
/*}*/
/*.box6>div:nth-child(8){*/
/*  transform: rotateY(120deg);*/
/*}*/
/*.box6>div:nth-child(9){*/
/*  transform: rotateY(135deg);*/
/*}*/
/*.box6>div:nth-child(10){*/
/*  transform: rotateY(150deg);*/
/*}*/
/*.box6>div:nth-child(11){*/
/*  transform: rotateY(165deg);*/
/*}*/
/*.box6>div:nth-child(12){*/
/*  transform: rotateY(180deg);*/
/*}*/
/*.box6>div:nth-child(13){*/
/*  transform: rotateY(195deg);*/
/*}*/
/*.box6>div:nth-child(14){*/
/*  transform: rotateY(210deg);*/
/*}*/
/*.box6>div:nth-child(15){*/
/*  transform: rotateY(235deg);*/
/*}*/
/*.box6>div:nth-child(1){*/
/*  transform: rotatex(15deg);*/
/*}*/
/*.box6>div:nth-child(12){*/
/*  transform: rotatex(30deg);*/
/*}*/
/*.box6>div:nth-child(13){*/
/*  transform: rotatex(45deg);*/
/*}*/
/*.box6>div:nth-child(14){*/
/*  transform: rotatex(60deg);*/
/*}*/
/*.box6>div:nth-child(15){*/
/*  transform: rotatex(75deg);*/
/*}*/
/*.box6>div:nth-child(16){*/
/*  transform: rotatex(90deg);*/
/*}*/
/*.box6>div:nth-child(17){*/
/*  transform: rotatex(105deg);*/
/*}*/
/*.box6>div:nth-child(18){*/
/*  transform: rotatex(120deg);*/
/*}*/
/*.box6>div:nth-child(19){*/
/*  transform: rotatex(135deg);*/
/*}*/
/*.box6>div:nth-child(20){*/
/*  transform: rotatex(150deg);*/
/*}*/
/*.box6>div:nth-child(21){*/
/*  transform: rotateX(165deg);*/
/*}*/
/*.box6>div:nth-child(22){*/
/*  transform: rotateX(180deg);*/
/*}*/
/*.box6>div:nth-child(23){*/
/*  transform: rotateX(195deg);*/
/*}*/
/*.box6>div:nth-child(24){*/
/*  transform: rotateX(210deg);*/
/*}*/
/*.box6>div:nth-child(25){*/
/*  transform: rotateX(235deg);*/
/*}*/
@keyframes yd {
  0%{
    transform: rotatey(0deg) rotateX(0deg)   ;
  }
  100%{
    transform: rotatey(360deg)  rotateX(360deg)   ;
  }

}
.el-menu{
  min-height: 550px;
  background-color: rgba(238, 241, 246,.3)
}
.el-aside{
  min-height: 550px;
}

. is-opened{
  background-color: rgba(238, 241, 246,.3)
}

</style>